<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景案例</title>
    <style type="text/css">
        #box1{
            /*
              盒子大小：width+padding*2+margin*2+border


            */
            box-sizing: content-box;
            /*background: url("img/image.jpg")  no-repeat red;*/
            width: 300px;
            height: 300px;
            background-color:red ;
            border: 20px solid rgba(0,0,0,0.2);
            /*background-size: 200px 120px;*/
            /*background-size: 100% 100%;*/
            background-size: 100% 100%;
            padding: 60px;
            /*裁剪到内容区域*/
            background-clip: border-box;
        }
        
       #box2{
           /*backgroud:包括内容，内边距以及边框*/
           width: 300px;
           height: 240px;
           padding: 30px;
           background-color: red;
           border: 10px solid rgba(0,0,0,0.3);
           /*裁剪到内容*/
           /*background-clip: content-box;*/
           /*裁剪到内边距*/
           /*background-clip: padding-box;*/
           background-clip: border-box;
       }
       #box3{
           width: 300px;
           height: 240px;
           background-image: url(img/border.png);
           background-repeat: no-repeat;
           padding: 30px;
           border: 30px solid rgba(0,0,0,0.3);
           /*
              background-origin改变背景的起始位置，后边如果
              做背景定位的话，根据改变后的起始位置做定位
           */
           background-origin: content-box;
           background-position: 10px 10px;
       }
        
    </style>
</head>
<body>
<!--
   背景属性：
   backgroud:url()   位置   是否平铺   color；
   background-size:设置背景图片的大小
   background-origin：改变原始点，跟背景位置搭配使用
   background-clip：背景图片的裁剪

-->
       <!--<div id="box1">-->
           <!--今天是周一-->
           <!--今天是周一-->
           <!--今天是周一  今天是周一  今天是周一  今天是周一  今天是周一-->
           <!--今天是周一  今天是周一  今天是周一  今天是周一  今天是周一-->
       <!--</div>-->

        <!--<div id="box2">-->
            <!--这是盒子模型的内容 这是盒子模型的内容 这是盒子模型的内容 这是盒子模型的内容 这是盒子模型的内容-->
            <!--这是盒子模型的内容 这是盒子模型的内容 这是盒子模型的内容 这是盒子模型的内容 这是盒子模型的内容-->
            <!--这是盒子模型的内容 这是盒子模型的内容 这是盒子模型的内容 这是盒子模型的内容 这是盒子模型的内容-->
            <!--这是盒子模型的内容 这是盒子模型的内容 这是盒子模型的内容 这是盒子模型的内容 这是盒子模型的内容 这是盒子模型的内容-->
            <!--这是盒子模型的内容 这是盒子模型的内容 这是盒子模型的内容 这是盒子模型的内容 这是盒子模型的内容-->
        <!--</div>-->
      <div id="box3">
          这是盒子模型的内容 这是盒子模型的内容 这是盒子模型的内容 这是盒子模型的内容 这是盒子模型的内容
          这是盒子模型的内容 这是盒子模型的内容 这是盒子模型的内容 这是盒子模型的内容 这是盒子模型的内容
          这是盒子模型的内容 这是盒子模型的内容 这是盒子模型的内容 这是盒子模型的内容 这是盒子模型的内容
          这是盒子模型的内容 这是盒子模型的内容 这是盒子模型的内容 这是盒子模型的内容 这是盒子模型的内容 这是盒子模型的内容
          这是盒子模型的内容 这是盒子模型的内容 这是盒子模型的内容 这是盒子模型的内容 这是盒子模型的内容
      </div>


</body>
</html>